//饼图
var color = ["#00a9e1","#ff8700","#b8ff2e","#09e24b","#09a7e2","#360293","#560081","#af0058","#0046af","#09e2cb","#93dd6e", "#fce24f"]
var pieData=[  
        {value: 1279, name: "疑似无证经营"},
        {value: 1219, name: "疑似超范围经营"},
        {value: 1119, name: "IP地址转租"},
        {value: 819, name: "信安系统运行异常"}
]
var pie3Opt = {
    color:color,
    backgroundColor: 'transparent',
    legend: {
        show:false,
        orient: 'vertical',
        right: '0%',
        top: 'middle',
        //data:['阿里云','腾讯云','金山云','电信云','百度云','360云','京东云','亚马逊云'],
        textStyle:{
            color:'#fff'
        }
    },
    tooltip: {
        show: false
    },
    series: [{
        name: '占比',
        type: 'pie',
        radius: ['55%', '75%'],
        center: ['50%', '50%'],
        hoverAnimation: true,
        label: {
            normal: {
                show: false,
                position: 'center'
            },
            emphasis: {
                show: false,
                textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            }
        },
        data: pieData
    },{
            name: '',
            type: 'pie',
            clockWise: true,
            hoverAnimation: false,
            animationType: 'scale',
            radius: [200, 200],
            center: ['50%', '50%'],
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                value: 0,
                label: {
                    normal: {
                        formatter: '38',
                        textStyle: {
                            color: '#20fd07',
                            fontSize: 25,
                            fontWeight: 'bold'
                        }
                    }
                }
            }, {
                tooltip: {
                    show: false
                },
                label: {
                    normal: {
                        formatter: '\n门户',
                        textStyle: {
                            color: '#bbeaf9',
                            fontSize: 12
                        }
                    }
                }
            }]
        }]
};
var pie3Chart = echarts.init(document.getElementById('ecPie'))


function sum(){
	var totle=0;
	for(var i=0;i<pieData.length;i++){
		totle+=pieData[i].value
	}
	return totle
}
var pieIndex = 0
var pieAutoShow = function(){
    if (pieIndex > pieData.length-1){
        pieIndex = 0
    }
    for (var i = 0;i < pieData.length;i++){
        if (i != pieIndex){
            pie3Opt.series[0].data[i]['selected'] = false;
        }else{
            pie3Opt.series[0].data[i]['selected'] = true;
        }
    }
    //pie3Opt.series[1].data[0].label.normal.formatter = pie3Opt.series[0].data[pieIndex].value + ""
    pie3Opt.series[1].data[0].label.normal.formatter=parseInt(pie3Opt.series[0].data[pieIndex].value/sum()*100) + "%"
    pie3Opt.series[1].data[1].label.normal.formatter = "" + pie3Opt.series[0].data[pieIndex].name
    pie3Chart.setOption(pie3Opt)
    pieIndex++
    setTimeout(pieAutoShow,1200)
}
pieAutoShow()



//地图

var geoCoordMap={}
var mapFeatures = echarts.getMap('china').geoJson.features;
mapFeatures.forEach(function(v) {
    // 地区名称
    var name = v.properties.name;
    // 地区经纬度
    geoCoordMap[name] = v.properties.cp;
});

var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
              cur: data[i].cur
            });
        }
    }
    console.log(res)
    return res;
};
var mapData=[
	{name:'北京',value:53,cur:6},
	{name:'江苏',value:22,cur:2},
	{name:'上海',value:33,cur:4},
	{name:'重庆',value:3,cur:1},
	{name:'云南',value:2,cur:1},
	{name:'天津',value:5,cur:1},
	{name:'吉林',value:2,cur:1},
	{name:'四川',value:13,cur:1},
	{name:'安徽',value:6,cur:0},
	{name:'福建',value:13,cur:0},
	{name:'广东',value:38,cur:0},
	{name:'广西',value:1,cur:0},
	{name:'贵州',value:1,cur:0},
	{name:'河北',value:1,cur:0},
	{name:'河南',value:4,cur:0},
	{name:'黑龙江',value:1,cur:0},
	{name:'湖北',value:8,cur:0},
	{name:'湖南',value:9,cur:0},
	{name:'江西',value:6,cur:0},
	{name:'辽宁',value:5,cur:0},
	{name:'青海',value:1,cur:0},
	{name:'山东',value:9,cur:0},
	{name:'山西',value:2,cur:0},
	{name:'陕西',value:3,cur:0},
	{name:'新疆',value:2,cur:0},
	{name:'浙江',value:18,cur:0},
	{name:'海南',value:0,cur:0},
	{name:'甘肃',value:0,cur:0},
	{name:'宁夏',value:0,cur:0},
	{name:'内蒙古',value:0,cur:0},
	{name:'西藏',value:0,cur:0},
	{name:'新疆',value:0,cur:0},
	{name:'台湾',value:0,cur:0},
	{name:'香港',value:0,cur:0},
	{name:'澳门',value:0,cur:0}
]
	
var optionMap = {
	tooltip: {
		trigger: 'item',
		formatter:function(param){
			return '<div>'+param.name+'</div>'+
				    '<div>本期数量：'+param.data.cur+'</div>'+
				    '<div>累计数量：'+param.data.value[2]+'</div>';
		}
	},
	/*visualMap: {
    seriesIndex: 0,
    min: 0,
    max: 53,
    left: '10%',
    top: 'bottom',
    itemHeight:'70',
    bottom:'10%',
    inRange: {
    //  color: ['#42a5e1','#076ba6']
//    	color: ['#0ef0e6','#076ba6']
	    color: ['#3AE9F2','#FFBA3F']
    },
//      text: ['高','低'],           // 文本，默认为数值文本
    calculable: true,
    textStyle:{
    	color:'#fff'
    }
//  hoverLink: false
	},*/
	geo: {
		show: true,
		zoom: 1.2,
		roam: false,
		map: 'china',
		itemStyle: {
			normal: {
				show: false,
				borderColor: '#285ac6',
				borderWidth: 1,
				areaColor: '#123082',
				shadowBlur: 3,
				shadowColor: '#081435',
				shadowOffsetX: -4,
				shadowOffsetY: 8
			},
			emphasis: {
				areaColor: '#fce24f',
				borderColor: '#fce24f'
			}
		}
	},
	series: [{
			type: 'map',
			zoom: 1.2,
			mapType: 'china',
			roam: false,
			label: {
				normal: {
					show: false,
					textStyle: {
						color: '#fff'
					}
				},
				emphasis: {
					show: true,
					textStyle: {
						color: '#fff'
					}
				}
			},
			itemStyle: {
				normal: {
					show: false,
					borderColor: '#3770ea',
					borderWidth: 1,
					areaColor: '#0f2d87'
				},
				emphasis: {
					areaColor: '#2a56bd',
					borderColor: '#2a56bd'
				}
			},
			data: convertData(mapData)
		},{
			name: 'Top 5',
			type: 'effectScatter',
			zlevel: 1,
			coordinateSystem: 'geo',
			symbolSize: function(val) {
				return val[2] / 53 * 20+10
			},
			showEffectOn: 'render',
			rippleEffect: {
				brushType: 'stroke'
			},
			hoverAnimation: true,
			label: {
				normal: {
					//            formatter: '{b}',
					position: 'right',
					show: false
				}
			},
			itemStyle: {
				normal: {
					color: '#f4e925',
					shadowBlur: 10,
					shadowColor: '#333'
				}
			},
			//    data: convertData(mapData)
			data: convertData(mapData.sort(function(a, b) {
				return b.value - a.value
			}).slice(0, 5))
		},{
			name: 'Top 5',
			type: 'scatter',
			zlevel: 1,
			coordinateSystem: 'geo',
			symbolSize: function(val) {
				//        return val*4+8;
				return val[2] / 53 * 20 +10
			},
			showEffectOn: 'render',
			rippleEffect: {
				brushType: 'stroke'
			},
			hoverAnimation: true,
			label: {
				normal: {
					//            formatter: '{b}',
					position: 'right',
					show: false
				}
			},
			itemStyle: {
				normal: {
					color: '#f4e925',
					shadowBlur: 10,
					shadowColor: '#333'
				}
			},
			//    data: convertData(mapData)
			data: convertData(mapData.sort(function(a, b) {
				return b.value - a.value;
			}).slice(5))
		}]
};

var mapChart = echarts.init(document.getElementById('mapEc'))
mapChart.setOption(optionMap)

/*ranklistRight1Data();

function ranklistRight1Data(){
	var ranklistRight1 = $('#ranklistRight1');
	ranklistRight1.empty();
	var datas = [
		['北京承启通科技有限公司',3],
		['上海联网科贸有限公司',3],
		['深圳第一线通信有限公司',3],
		['北京首都在线科技股份有限公司',3],
		['易云捷讯科技（北京）股份有限公司',3]
	];
	var str = "<table class='tab_content' style='text-align: center;'>";
	for(var i = 0 ; i < datas.length ; i++){
		str +="<tr>"+
    	"<td style='width:60px'>"+(i+1)+"</td>"+
    	"<td style='width:160px' title='"+datas[i][0]+"'>"+datas[i][0]+"</td>"+
    	"<td>"+datas[i][1]+"</td>"+
    	"</tr>"
	}
	str +="</table>";
	ranklistRight1.append(str);
}
*/

window.addEventListener("resize", function () {
    mapChart.resize();
    pie3Chart.resize();
});

var data1 = [
	['北京承启通科技有限公司',3],
	['上海联网科贸有限公司',3],
	['深圳第一线通信有限公司',3],
	['北京首都在线科技股份有限公司',3],
	['易云捷讯科技（北京）股份有限公司',3]
];
var data2 = [
	['北京新浪互联信息服务有限公司',3],
	['广东群英网络有限公司',3],
	['上海欧网网络科技发展有限公司',2],
	['广东睿江科技有限公司',2],
	['深圳市云帆加速科技有限公司',2]
];
var data3 = [
	['安徽八度网络科技有限公司',3],
	['北京鼎向网络数据科技有限公司',3],
	['北京企商在线数据通信科技有限公司',3],
	['厦门三五互联科技股份有限公司',3],
	['广州英虎网络股份有限公司',3]
];
ranklistRightData(data1,'#ranklistRight1');
ranklistRightData(data2,'#ranklistRight2');
ranklistRightData(data3,'#ranklistRight3');
function ranklistRightData(datas,id){
	var ranklistRight = $(id);
	ranklistRight.empty();
	var str = "<table class='tab_content' style='text-align: center;'>";
	for(var i = 0 ; i < datas.length ; i++){
		str +="<tr>"+
    	"<td style='width:60px'>"+(i+1)+"</td>"+
    	"<td style='width:160px' title='"+datas[i][0]+"'>"+datas[i][0]+"</td>"+
    	"<td>"+datas[i][1]+"</td>"+
    	"</tr>"
	}
	str +="</table>";
	ranklistRight.append(str);
}

